<template>
  <div class="form">
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      label-width="100px"
      size="medium"
      class="demo-ruleForm"
      status-icon
    >
      <el-form-item label="用户名" prop="name">
        <el-input v-model="ruleForm.name" type="text" placeholder="请输入用户名" />
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="ruleForm.email" type="email" placeholder="请输入QQ邮箱,暂不支持其他邮箱" />
        <el-button v-if="ruleForm.name" size="mini" @click="send">发送</el-button>
        <span v-if="msg">{{ msg }}</span>
      </el-form-item>
      <el-form-item label="验证码" prop="code">
        <el-input v-model="ruleForm.code" type="text" placeholder="请输入验证码" />
        <span ref="send" class="errmsg">{{ codeMsg }}</span>
      </el-form-item>
      <el-form-item label="密码" prop="Apassword">
        <el-input v-model="ruleForm.Apassword" type="password" placeholder="请输入密码" />
      </el-form-item>
      <el-form-item label="确认密码" prop="Bpassword">
        <el-input v-model="ruleForm.Bpassword" type="password" placeholder="请输入确认密码" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">注册</el-button>
        <el-button type="warning" @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
    <div class="success">
      <nuxt-link v-if="hidden" to="/#">注册成功, 5秒后跳转登录页面或点击此处跳转</nuxt-link>
    </div>
  </div>
</template>

<script>
export default {
  layout: 'register',
  data () {
    const validatePass = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入密码'))
      } else if (this.ruleForm.Bpassword !== '') {
        this.$refs.ruleForm.validateField('Bpassword')
      }
      callback()
    }
    const validatePass2 = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入确认密码'))
      } else if (this.ruleForm.Apassword !== value) {
        callback(new Error('两次输入的密码不一致'))
      }
      callback()
    }
    const validateName = async (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入用户名'))
      } else {
        const { status, data: { code, msg } } = await this.$axios.post('/users/checkName', { name: value })
        if (status === 200 && code === -1) {
          callback(new Error(msg))
        }
      }
      callback()
    }
    return {
      hidden: false,
      i: 5,
      msg: '',
      codeMsg: '',
      ruleForm: {
        name: '',
        email: '',
        code: '',
        Apassword: '',
        Bpassword: ''
      },
      rules: {
        name: [
          { required: true, trigger: 'blur', validator: validateName }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' }
        ],
        Apassword: [
          { required: true, trigger: 'blur', validator: validatePass }
        ],
        Bpassword: [
          { required: true, trigger: 'blur', validator: validatePass2 }
        ]
      }
    }
  },
  methods: {
    async send (event) {
      const self = this
      const { status, data: { code, msg } } = await this.$axios.get('/users/sendCode', {
        params: {
          name: self.ruleForm.name,
          email: self.ruleForm.email,
          code: self.ruleForm.code
        }
      })
      if (status === 200 && code === 1) {
        self.msg = msg
      } else {
        self.msg = '发送失败'
      }
    },
    submit () {
      const self = this
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          const { status, data } = await this.$axios.post('/users/register', {
            name: self.ruleForm.name,
            password: self.ruleForm.Apassword,
            email: self.ruleForm.email,
            code: self.ruleForm.code
          })
          if (status === 200 && data.code === 1) {
            self.hidden = true
            setTimeout(() => {
              location.href = '/login'
            }, 5000)
          } else {
            self.codeMsg = data.msg
          }
        }
      })
    },
    cancel () {
      location.href = "/"
    }
  }
}
</script>

<style lang="stylus" scoped>
.form >>> .el-icon-circle-check
  color #67C23A
.form
  width 450px
  margin 50px auto 20px auto
  .errmsg
    color red
    font-size 14px
  .success
    text-indent 40px
    color #67C23A
</style>
